<template>
    <!-- 患者信息描述 -->
    <view class="patient_info card mt16 ml16 mr16">
        <view class="patient_title">
            请详细描述你的病情
        </view>
        <!-- 多行输入区 -->
        <textarea class="textareaStyle" placeholder-class="textareaPlaceholderStyle"
            placeholder="为了更好获得医生帮助，请尽可能详细描述病情"></textarea>
        <checkbox-group>
            <checkbox value="isOk"></checkbox> 需要医生指导用药
        </checkbox-group>
    </view>

    <!-- 上传患者照片或报告 -->
    <view class="patientUpload card mt16 ml16 mr16">
        <view class="patientUpload_title">
            上传检查报告或患处照片
        </view>

        <!-- 上传区域 -->
        <view class="upload_box">
            <!-- 展示图片的区域 -->
            <view class="upload_pic_area">
                <view class="upload_pic_item" v-for="(item, index) in uploadPicArr" :key="index">
                    <image :src="item.pic" mode="" />
                    <view class="deleteBtn" @click="deletePic(index)">
                        <image src="/static/other/shanchu-goods.svg" mode="" />
                    </view>
                </view>
            </view>
            <!-- 点击上传按钮 -->
            <view class="upload_btn" @click="uploadBtn">
                <image src="/static/other/shuxing-img.png" mode="" />
            </view>
        </view>
    </view>

    <!-- 选择就诊人 -->
    <view class="selectPatient card mt16 ml16 mr16">
        <view class="patientInfo">
            <view class="patientTitle">选择就诊人</view>
            <view class="patientDetail mt16">
                <view class="patientIcon">
                    <image src="/static/other/touxiang.svg" mode="" />
                </view>
                <view class="patientName ml16">{{ patientName }}</view>
            </view>
        </view>
        <view class="pateintSelect" @click="selectPatientBtn">
            <text>{{ patientName.length > 0 ? '重新选择就诊人' : '选择就诊人' }}</text>
        </view>
    </view>

    <view style="height: 400rpx;"></view>

    <view class="ft">
        <view class="cancel">取消</view>
        <view class="submit">提交</view>
    </view>
</template>

<script setup lang="ts">
import { uploadImg } from '@/utils/upload'
import { uploadImgURL, uploadAIURL } from '@/http/env'
import { ref } from 'vue'
import { patientStore } from '@/store/patient'

const store = patientStore();


//定义一个存放上传图片的数组
const uploadPicArr = ref<{ pic: string }[]>([])

//点击上传图片按钮实现上传
const uploadBtn = async () => {
    //调用封装的上传方法
    const res = await uploadImg(uploadImgURL, '正在上传中', '上传失败')
    //   const res = await uploadImg(uploadAIURL, '正在识别中', '识别失败')
    //console.log('身份证识别：', JSON.parse(res.data))

    //console.log('上传成功结果：', { pic: JSON.parse(res.data).data })
    uploadPicArr.value.push({ pic: JSON.parse(res.data).data })
}

//删除上传图片
const deletePic = (i: number) => {
    uploadPicArr.value.splice(i, 1)
}

//就诊人姓名
const patientName = ref('')

//监听state值的改变
store.$subscribe((mutations, state) => {
    patientName.value = state.patient.name
})

//点击选择就诊人，打开选择就诊人页面
const selectPatientBtn = () => {
    uni.navigateTo({
        url: '/pages/patient/myPatient'
    })
}

</script>

<style lang="scss">
@import '@/assets/style/public.scss';

page {
    background: #f7f7f7;
}

.patient_info {
    background: #fff;
    padding: 10rpx 20rpx;
    font-size: 36rpx;

    .patient_title {
        padding: 10rpx 20rpx;
    }
}

:deep(.textareaPlaceholderStyle) {
    color: #53dedb;
    font-size: 14px;

}

.textareaStyle {
    width: 100%;
    padding: 10rpx 20rpx;
}

.patientUpload {
    background: #fff;
}

// 上传照片样式
.upload_box {
    position: relative;
    display: flex;

    //图片展示区
    .upload_pic_area {
        display: flex;

        //每个图片样式
        .upload_pic_item {
            position: relative;
            background: #000;

            image {
                width: 160rpx;
                height: 160rpx;
            }

            .deleteBtn {
                position: absolute;
                top: 0;
                right: 0;
                width: 50rpx;
                height: 50rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }


    .upload_btn {
        padding: 20rpx;

        image {
            width: 200rpx;
            height: 200rpx;
        }
    }
}

.selectPatient {
    display: flex;
    justify-content: space-between;

    .patientInfo {
        .patientDetail {
            display: flex;
            justify-content: center;
            align-items: center;

            .patientIcon {
                image {
                    width: 100rpx;
                    height: 100rpx;
                }
            }

        }
    }

    .pateintSelect {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #0045ab;
    }
}
</style>